<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>HTML5 Workshop - Tools</title>
  <link rel="stylesheet" href="js/jquery.mobile-1.0rc2.min.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="css/clock/web_timer.css" />
  <!--<link rel="stylesheet" href="css/clock/ipad_timer.css" />-->
  <!--<link rel="stylesheet" href="css/clock/ipad_timer_h.css" />-->
  <!--<link rel="stylesheet" href="css/clock/web_timer.css" />-->
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="js/UI.js"></script>
  <script type="text/javascript" src="js/tools_clock/timeTask.js"></script>
  <script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
	<script>
	addMetaFile();
</script>
</head>

<body>
  <header id="top">
      <div id="logo">logo</div>
      <div id="top_button">
        <span class="toggle_button" id="left_tools_button" style="background-image:url(../image/iphone/phone_topbuttom_bg_hover.png); color:#fff; text-shadow: 0 -1px 1px #758398;">Tolls</span>
        <span class="toggle_button" id="right_games_button">Games</span>
      </div>
      <div id="share">Share weibo</div>
  </header>
  <div id="clock_container">
    <div data-role="page" id="clock_area">
      <div data-role="content" id="content1">
        <ul id="clock_box">
          <!--clock_toggleButton start-->
          <li id="clock_toggleButton">
            <ul id="clock_button">
              <li><div class="countdown_button" id="sw_bu"></div></li>
              <li><div class="stopwatch_button" id="cd_bu"></div></li>              
            </ul>
          </li>
          <!--clock_toggleButton end-->
          
          <!--stopwatch_content start-->
          <li id="clock_content">
            <!--div1 start-->
            <div id="div1" style="display:block">
              <!--show_timer start-->
              <ul id="show_timer">
                <li class="timer1"><input type="text" value="00" id="larmTime1" disabled/></li>
                <li class="timer2">：</li>
                <li class="timer1"><input type="text" value="00" id="larmTime2" disabled/></li>
                <li class="timer2">：</li>
                <li class="timer1"><input type="text" value="00" id="larmTime3" disabled/></li>
				<li class="timer3"><span id="larmTime4">0</span></li>
              </ul>
              <!--show_timer end-->
              <!--timer_button start-->
              <div id="timer_button">
                <a id="start" style="color:white; font-weight:normal" href="#" class="button_red button_big"/>Start</a>
                <a id="stop" style="color:white; font-weight:normal" href="#" class="button_yellow button_big"/>Stop</a>
                <a id="record" style="color:white; font-weight:normal" href="#"  class="button_blue button_big"/>Record</a>
                <a id="reset" style="color:white; font-weight:normal" href="#" class="button_green button_big"/>Reset</a>
              </div>
              <!--timer_button end-->
              <div id="raking">
                <h1 id="raking_title">Ranking<span id="time">Time</span></h1>
              </div>
              <div id="show_lap">
                <table width="100%" cellpadding="0" cellspacing="0" id="clock_table" class="clock_table">
                 
                </table>
              </div>
            </div>
            <!--div1 end-->
            <div id="div2" style="display:none">
              <!--show_timer start-->
              <ul id="show_timer">
                <li class="timer1"><input type="text" value="00" id="larmTime5" onblur="isNumber('larmTime5')"/></li>
                <li class="timer2">：</li>
                <li class="timer1"><input type="text" value="00" id="larmTime6"onblur="isNumber('larmTime6')"/></li>
                <li class="timer2">：</li>
                <li class="timer1"><input type="text" value="00" id="larmTime7" onblur="isNumber('larmTime7')"/></li>
                <li class="timer3" id="larmTime8">0</li>
              </ul>
              <!--show_timer end-->
              <div id="small_arrow">
                <div class="button1">
                  <div class="arrow1" id="hour1"></div>
                  <div class="arrow2" id="hour2"></div>
                </div>
                <div class="button1 button_left">
                  <div class="arrow1" id="min1"></div>
                  <div class="arrow2" id="min2"></div>
                </div>
                <div class="button1 button_left">
                  <div class="arrow1" id="sec1"></div>
                  <div class="arrow2" id="sec2"></div>
                </div>
              </div>
              
              <div id="four_button">
                <a href="" data-role="button" data-inline="true" id="start_button" class="buton2"></a>
                <a href="" data-role="button" data-inline="true" id="stop_button" class="buton2"></a>
                <a href="" data-role="button" data-inline="true" id="pause_button" class="buton2"></a>
                <a href="" data-role="button" data-inline="true" id="add_button" class="buton2"></a>
              </div>
              
              <div id="project">
                <h1 id="raking_title">Project<span id="time_set">Time Set</span></h1>
              </div>
              
               <div id="show_lap">
                <table width="100%" cellpadding="0" cellspacing="0" id="clock_table1" class="clock_table">
                  <tbody id="t1">
                    <tr>
                      <td width="40%"><div class="row3" id="time0">Lunch Break</div></td>
                      <td width="50%"><div class="row4">00:00:12</div></td>
                      <td width="10%"><img src="image/tools_clock/timer_countdown_delete.png" onclick="deleteplan(this)" id="img1"/>
						
					  </td>
                    </tr>
                  </tbody>
                 
                </table>
              </div>
            </div>
          </li>
          <!--stopwatch_content end-->
        </ul>
      </div>
		</div>
  </div>
   
	
  
  <footer id="footer">
  </footer>


</body>
</html>
